<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <% 
    String path = request.getContextPath();
     %>
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}" ></c:set>
<script type="text/javascript" src="${path }/js/jquery-3.6.0.min.js""></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>资讯区发布的文章</title>
    <link rel="stylesheet" href="<%=path %>/css/semantic.min.css">
    <link rel="stylesheet" href="<%=path %>/css/index.css">
</head>
<body>

<!--导航-->
<nav class="ui inverted segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">资讯区发布的文章</h2>
           <!--  <a href="organization.html" class="activem-item item m-mobile-hide"><i class="home icon"></i>国际组织</a>-->
            <a href="#"  class="m-item item m-mobile-hide">网站总访问量:<span id="count">${applicationScope.onlineCount}</span>个</a> 
            <a href="${path}/web/index.jsp" class="m-item item m-mobile-hide"><!-- <i class="clone icon"></i> -->首页</a>
           
        </div>
    </div>

     
     
    <script type="text/javascript">
          //改变了监听器的数字
          function changeOnlineCount(){
         		$.ajax({
         			url:"${path}/ConsultingArticleController",
         			type:"post",
         			data:"action=getOnline",
         			success:function(mes){
         				//mes就是Controller控制器发送回来的count
         				$("#count").html(mes);
         			}
         		})
          }
          
          //网页加载结束之后,执行以下代码
          $(function(){
				//2000毫秒->2 秒
              setInterval(changeOnlineCount,2000);
          })
          
       </script> 
     
     
     
     
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>

</nav>
<!--中间-->

<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <!--header-->
        <div class="ui top attached segment">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h3 class="ui teal header">文章详情</h3>
                </div>
                <div class="right aligned column">
              	  <h3  class="ui orange header m-inline-block m-text-thin"></h3>
                   	<%-- 您是网站第<h3 class="ui orange header m-inline-block m-text-thin">${sessionScope.onlineCount}</h3>位来访者 --%>
                   	
                </div>
            </div>
        </div>
        

        <div class="ui top attached segment teal">
            <!-- <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear" > -->
                <!-- <div class="ui mobile reversed stackable grid"> -->
                    <div class="ui eleven wide column">
                        <h3 class="ui header" style="text-align:center;">${article.title}</h3>
                        <h4 style="text-align:center;font-weight:normal">发布人:${article.managerinfo.nickname}</h4>
                        <h4 style="text-align:center;font-weight:normal">日期:<fmt:formatDate value="${article.pubTime}" pattern="yyyy-MM-dd HH:mm"/></h4>
                        <!-- <div   class="ui five wide column"> -->
                        <a href="#" target="_blank">
                            <img  style="height:400px;width:600px;margin:auto;" src="${path}/images/articleImages/${article.pic}" alt="" class="ui rounded image" style="width: 150px;">
                        </a>
                       <!-- </div> -->
                        <p  class="m-text">${article.content}</p>
                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                     
                                    <%-- <div class="item">
                                        <!-- <i class="calendar icon"></i> -->  
                                    </div> --%>
                                    <div class="item">
                                        <%-- <img src="${path }/images/10.jpg" alt="" class="ui avatar image"> --%>
                                        <div class="content">
                                         		  <%-- <a href="#" class="header"> 阅读量:${sessionScope.onlineCount}</a> --%>
                                        </div>
                                    </div> 
                                   
                                </div>
                            </div>
                           
                        </div>
                    </div>

                    

                <!-- </div> -->
            <!-- </div> -->





        </div>

     

    </div>



</div>







<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/semantic.min.js"></script>

<script>
    $(".m-mobile-show").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    });

</script>

</body>
</html>